<template>

    <div class="home">
      <div class="top-swiper">
        <top :enable="true" current="home"></top>
        <swiper style="width: 100%;overflow-x: hidden" :options="swiperOption" v-if="loop.length>0">
          <swiper-slide :class="item" v-for="(item, index) in loop" :key="index">
            <div class="mySwiper-container">
              <div class="mc-title">
                <div style="width: 100%;float: left;">
                  <span style="font-size: 26px;color: white;font-weight: 400">
                    连连通外贸融
                  </span>
                </div>
                <div style="width: 100%;float: left;margin: 28px 0">
                  <span style="font-size: 42px;color: white;font-weight: 500;text-shadow: 0px 2px 2px rgba(94,55,0,0.4);">
                    携手金融机构 扶持小微发展
                  </span>
                </div>
                <div style="width: 100%;float: left;font-size: 28px;font-weight: 300;text-shadow: 0px 2px 2px rgba(0,0,0,0.4);">
                  <span>纯线上</span>
                  <span class="tt-title"> / </span>
                  <span>纯信用</span>
                  <span class="tt-title"> / </span>
                  <span>高额度</span>
                </div>
                <div style="width: 100%;float: left">
                  <div class="mc-right" @click="gotoTsd">
                    <span>点击了解更多</span>
                    <img src="../../assets/homeNew/swiper-right_title.png" alt=""/>
                  </div>
                </div>
              </div>
            </div>
          </swiper-slide>
          <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
      </div>

      <div class="mid-container">
        <div class="rz-content">
          <div class="content-top">
            <img src="../../assets/homeNew/home_page_img_js.png">
          </div>
          <div class="content-container">
            <div class="content-main">
              <div class="content-tsd">
                <p style="font-family: PingFangTC-Semibold, PingFangTC;color: white; font-size: 28px;font-weight: 600;padding: 18px 0 0 0">外贸融</p>
                <div class="title-bolder">
                  外贸融是连连科技联合银行及金融机构，贯彻国家普惠金融政策，扶持小微企业发展，以企业出口退税数据为依据，以退税款为第一还款来源的新型互联网金融产品。
                </div>
                <el-button type="warning" class="base-btn detail-btn" @click="gotoTsd()">了解详情
                </el-button>
              </div>
              <div class="content-perfect">
                <div class="cp-item">
                  <div class="left">
                    <img src="../../assets/homeNew/low.png" alt="">
                    <span>门槛低</span>
                    <p class="p-left">纯信用，免担保</p>
                  </div>
                  <div class="right">
                    <img src="../../assets/homeNew/height.png" alt="">
                    <span>高额度</span>
                    <p class="p-right">
                      最高{{(product.maxLoanableAmount/10000).toFixed(0)}}万
                    </p>
                  </div>
                </div>
                <div class="cp-item">
                  <div class="left">
                    <img src="../../assets/homeNew/easy.png" alt="">
                    <span>低利率</span>
                    <p class="p-left">
                      年化利率5%-6%
                    </p>
                  </div>
                  <div class="right">
                    <img src="../../assets/homeNew/low.png" alt="">
                    <span>申请易</span>
                    <p class="p-right">全线上自动办理</p>
                  </div>
                </div>
                <div class="cp-item">
                  <div class="left">
                    <img src="../../assets/homeNew/perfect.png" alt="">
                    <span>服务优</span>
                    <p class="p-left">专属客服经理全程服务</p>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="content-top" style="margin-top: 52px">
            <img src="../../assets/homeNew/home_page_img_hz.png">
          </div>

          <div class="content-logo">
            <img style="margin-right: 125px" src="../../assets/homeNew/home_page_img_zs.png" alt="" />
            <img src="../../assets/homeNew/home_page_img_tl.png" alt="" />
          </div>
        </div>
      </div>

      <bottom></bottom>

      <div style="clear: both"></div>
    </div>

</template>

<script>
import {swiper, swiperSlide} from 'vue-awesome-swiper';
import {queryWMRProduct} from '../../api/product/product';
import top from '@/components/layout/top';
import Bottom from '@/components/layout/bottom';

import home_page_img_rz from '@/assets/homeNew/home_page_img_rz.png';
import home_page_img_mt from '@/assets/homeNew/home_page_img_mt.png';
import home_page_img_hz from '@/assets/homeNew/home_page_img_hz.png';
import home_page_img_cmb from '@/assets/homeNew/home_page_img_cmb.png';
import home_page_img_pf from '@/assets/homeNew/home_page_img_pf.png';

import home_page_img_zs from '@/assets/homeNew/home_page_img_zs.png';
import home_page_img_hy from '@/assets/homeNew/home_page_img_hy.png';
import home_page_img_jy from '@/assets/homeNew/home_page_img_jy.png';
import home_page_img_hx from '@/assets/homeNew/home_page_img_hx.png';
import home_page_img_ll from '@/assets/homeNew/home_page_img_ll.png';
import home_page_img_tl from '@/assets/homeNew/home_page_img_tl.png';
import home_page_img_3 from '@/assets/homeNew/home_page_img_3.png';
import home_page_img_1 from '@/assets/homeNew/home_page_img_1.png';
import home_page_img_al from '@/assets/homeNew/home_page_img_al.png';
import rz_tsd from '@/assets/homeNew/rz_tsd.png';

import {mapState} from "vuex";

export default {
  data() {
    return {
      home_page_img_rz, home_page_img_mt, home_page_img_hz,
      home_page_img_hy, home_page_img_jy, home_page_img_hx, home_page_img_ll,
      home_page_img_3, home_page_img_tl, home_page_img_1, home_page_img_al, rz_tsd,
      loop: ['img1'],
      loop2: [ ['home_page_img_hy', home_page_img_hy], ['home_page_img_hx', home_page_img_hx], ['home_page_img_zs', home_page_img_zs],['home_page_img_jy', home_page_img_jy], ['home_page_img_cmb', home_page_img_cmb], ['home_page_img_pf', home_page_img_pf], ['home_page_img_ll', home_page_img_ll], ['home_page_img_tl', home_page_img_tl]],

      swiperOption: {
        // 所有配置均为可选（同Swiper配置）
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
          bulletClass: 'my-bullet',
          bulletActiveClass: 'my-bullet-active'
        },
        mousewheelControl: true,
        observeParents: true,
        spaceBetween: 30,
        autoplay: false,
        loop: false,
        loopFillGroupWithBlank: true,
      },

      userInfo:{},

      product:{
        maxLoanableAmount:'',
        maxInterestRate:'',
        minInterestRate:''
      },
      advantageList: [
        {
          imgUrl:require("../../assets/homeNew/low.png"),
          titleTop:"门槛低",
          titleBottom:"纯信用，免担保"
        },
        {
          imgUrl:require("../../assets/homeNew/height.png"),
          titleTop:"高额度",
          titleBottom:"最高300w"
        },
        {
          imgUrl:require("../../assets/homeNew/low.png"),
          titleTop:"低利率",
          titleBottom:"年化利率5%-6%"
        },
        {
          imgUrl:require("../../assets/homeNew/perfect.png"),
          titleTop:"服务优",
          titleBottom:"专属客服经理全程服务"
        },
        {
          imgUrl:require("../../assets/homeNew/easy.png"),
          titleTop:"申请易",
          titleBottom:"全线上自助办理"
        }
      ]
    }
  },
  components: {
    top,
    Bottom,
    swiper,
    swiperSlide
  },

  computed: mapState({
    user(state) {
      return state.user;
    }
  }),
  created() {
    this.userInfo = this.user.user;
  },
  mounted(){
    this.initHomePage();
  },
  methods: {
    initHomePage(){
      let _ = this;
      queryWMRProduct().then(res=>{
        if(res.code==200){
          _.product = res.data;
        }
      })
    },
    toDetail(code) {
      let _this = this;
      this.$router.push({
        path: '/detailMt',
        query: {code: code}
      });
    },

    moreMt() {
      window.location.href = _const.HTTPLOCAT + '/#/moreMt';
    },
    gotoTsd() {
      window.location.href = _const.HTTPLOCAT + '/#/productList';
    },
    gotoDetail() {
      window.location.href = _const.HTTPLOCAT + '/login.html#/register';
    },
    gotoRegister() {
      this.$router.push({
        path: '/register'
      });
    },
    gotoLogin() {

      this.$router.push({
        path: '/login'
      });
    }
  }
}
</script>

<style lang="scss">
.swiper-container{
  height: 576px;
  position: absolute!important;
  top: 0;
}
.home {
  background: white;
  .my-bullet {
    width: 35px;
    height: 6px;
    display: inline-block;
    background: white;
    opacity: .0;
    margin: 0 10px;
  }
  .my-bullet-active {
    opacity: .0;
    background-color: white;
  }

  /*@media screen and (min-device-width: 1280px){
    .img1 {
      width: 100%;
      height: 492px;//改动
      position: relative;
      background: url(../../assets/homeNew/home_page_nbanner.png) center no-repeat;
    }
  }

  @media screen and (min-device-width: 1366px){
    .img1 {
      width: 100%;
      height: 492px;//改动
      position: relative;
      background: url(../../assets/homeNew/home_page_nbanner.png) center no-repeat;
    }
  }

  !*分辨率高于1440，采用下面的样式*!
  @media screen and (min-device-width: 1440px){
    .img1 {
      width: 100%;
      height: 573px;//改动
      position: relative;
      background: url(../../assets/homeNew/home_page_nbanner.png) center no-repeat;
    }
  }*/
  .img1 {
    width: calc(100vw)!important;
    height: 576px;
    position: relative;
    background: url(../../assets/homeNew/home_page_nbanner.png) center no-repeat;
  }
  .top-swiper{
    width: 100%;
    height: 576px;
    float: left;
    .mySwiper-container {
      width: calc(100vw);
      height: 100%;
      position: absolute;
      text-align: center;

      .mc-title{
        position: relative;
        top: 146px;
        font-size: 28px;
        height: 220px;
        font-weight: normal;
        font-family: PingFangSC-Regular, PingFang SC;
        span{
          color: white;
        }
        .tt-title{
          padding: 0 20px;
          color: #fffefe;
        }
      }
      .mc-right{
        width: 250px;
        height: 66px;
        line-height: 66px;
        font-size: 20px;
        color: white;

        border-radius: 50px;
        font-weight: 400;
        background: linear-gradient(270deg, #FAD961 0%, #F75A1C 100%);
        box-shadow: 0px 2px 6px 0px rgba(149,45,0,0.82);
        cursor: pointer;
        margin: 38px auto 0 auto;

        display: flex;
        align-items: center;
        justify-content: center;
        span{
          padding-right: 38px;
          padding-left: 10px;
        }
      }
    }
  }

  .mid-container {
    width: 100%;
    float: left;
    background: white;
    .rz-content {
      width: 1200px;
      text-align: center;
      margin: 0 auto;
      padding-bottom: 65px;
      .content-top {
        width: 1200px;
        text-align: center;
        margin-top: 18px;
        /*img {
          margin-top: 35px;
        }*/
      }
      .content-logo{
        margin: 60px 0 20px 0;
        img{
          height: 65px;
        }
      }
      .content-container {
        width: 1200px;
        margin: 0 auto;
        margin-top: 50px;
        .content-main {
          width: 1027px;
          height: 466px;
          position: relative;
          margin: 0 auto;
          padding-top: 81px;
          .img-container {
            width: 1027px;
            margin: 0 auto;
          }
        }
        .content-tsd {
          width: 340px;
          height: 401px;
          position: absolute;
          padding: 0 38px;
          background: url(../../assets/homeNew/rz_tsd.png) center no-repeat;
          left: 30px;
          top: 0px;
          .detail-btn {
            margin: 70px auto 0 auto;
            width: 200px;
            height: 45px;
            line-height: 45px;
            font-weight: 600;
            border: none;
            padding: 0;
          }
          .title-bolder{
            color: white;
            text-align: left;
            font-family: PingFangTC-Semibold, PingFangTC;
            text-align:justify;
            font-weight: 400;
            line-height: 170%;
          }
        }
        .content-perfect{
          width: 407px;
          position: absolute;
          left: 420px;
          bottom: 85px;
          height: 249px;
          .cp-item{
            width:100%;
            height: 83px;
            .left{
              width: 50%;
              float: left;
              text-align: left
            }
            .right{
              width: 50%;
              float: left;
              text-align: center
            }
          }
          .p-left{
            margin: 0px;
            font-size: 13px;
            color: #c2c1c1;
            position: relative;
            top: -6px;
            width: 130px;
            left: 45px;
          }
          .p-right{
            margin: 0px;
            font-size: 13px;
            color: rgb(194, 193, 193);
            position: relative;
            text-align: left;
            top: -6px;
            padding-left: 14px;
            width: 130px;
            left: 89px;
          }
          span{
            font-weight: bold;
            font-size: 18px;
            position: relative;
            bottom: 11px;
            left: 11px;
          }
        }
      }
    }
  }
}





</style>
